<template>
	<view class="record_container">
		<!-- 空记录提示 -->
		<view class="empty_tip" v-if="showEmptyTip">
			没有任何测试记录哦~
		</view>
		<!-- 多记录列表 -->
		<view class="record_item" v-for="(item, index) in testRecords" :key="index">
			<view class="item_info">
				<view class="info_result_ok" v-if="item.testStatus == 1">
					<view class="info_item">测试结果：<span class="info_value">{{ item.testResult }}</span></view>
					<view class="info_item_2">测试时间：{{ item.finishTime }}</view>
				</view>
				<view class="info_result_no" v-else>
					<view class="info_item">测试结果：待测试</view>
					<view class="info_item_2">测试时间：-.-</view>
				</view>
			</view>
			<view class="item_btn">
				<view class="btn_goto_analyze" v-if="item.testStatus == 1" @click="gotoAnalyze(item.testResult)">查看分析</view>
				<view class="btn_goto_test" v-else @click="gotoTest">去测试</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import moment from 'moment';
import { onShow } from '@dcloudio/uni-app';

// 测试/支付信息记录列表
let testRecords = ref();
// 空提示控制器
let showEmptyTip = ref(false);
onMounted(() => {
	// 查询测试记录/订单
	getAllOrders();
});

onShow(()=>{
	getAllOrders();
})

// 获取所有测试/支付订单
async function getAllOrders() {
	const res = await uni.$http.get(`/payInfos/getAll/${uni.getStorageSync('openId')}`);
	// 处理时间格式
	for (let item of res.data.data) {
		if (item.finishTime == null) {
			continue;
		}
		item.finishTime = moment(item.finishTime).format('YYYY-MM-DD hh:mm:ss');
	}
	testRecords.value = res.data.data;
	if(testRecords.value.length == 0){
		console.log("没有记录————");
		showEmptyTip.value = true;
	}
}

// 跳转分析页面
function gotoAnalyze(mbtiStrs){
	// 将mbti测试结果存入本地存储
	uni.setStorageSync("mbti-strs", mbtiStrs);
	uni.navigateTo({
		url:"/pages/analyze/analyze?type=0"
	})
}

// 跳转答题页面
function gotoTest(){
	uni.navigateTo({
		url:"/pages/answer/answer"
	})
}
</script>

<style lang="scss" scoped>
.record_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 20px 10px;
	width: 90%;
	margin: 0 auto;
	margin-top: 10px;
	border-radius: 6px;
	font-size: 14px;
}

.info_item_2 {
	margin-top: 20px;
}

.btn_goto_test,
.btn_goto_analyze {
	margin-right: 10px;
	border: solid red 1px;
	margin-right: 10px;
	border: solid #baa1a1 1px;
	padding: 10px;
	border-radius: 7px;
	background-color: #6bb8da;
	color: #fff;
	font-size: 14px;
}

.info_value{
	// font-size: 14px;	font-weight: 600;
}

.empty_tip{
	text-align: center;
	color: #999797;
}
</style>
